<template>
    <div class="enterprise-info">
      <!-- 页面头部 -->
      <div class="page-header">
        <h2>企业信息管理</h2>
        <div class="header-actions">
          <el-button type="primary" :icon="Edit" @click="handleEdit">编辑信息</el-button>
        </div>
      </div>
  
      <!-- 企业基本信息 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
            <el-tag :type="enterpriseStore.enterpriseInfo?.status === 'active' ? 'success' : 'warning'">
              {{ enterpriseStore.enterpriseInfo?.status === 'active' ? '已认证' : '待审核' }}
            </el-tag>
          </div>
        </template>
        
        <div class="info-content">
          <div class="info-item">
            <label>企业名称：</label>
            <span>{{ enterpriseStore.enterpriseInfo?.enterpriseName || '未设置' }}</span>
          </div>
          <div class="info-item">
            <label>企业简介：</label>
            <p class="description">{{ enterpriseStore.enterpriseInfo?.description || '未设置' }}</p>
          </div>
          <div class="info-item">
            <label>创建时间：</label>
            <span>{{ formatDate(enterpriseStore.enterpriseInfo?.createTime) }}</span>
          </div>
          <div class="info-item">
            <label>更新时间：</label>
            <span>{{ formatDate(enterpriseStore.enterpriseInfo?.updateTime) }}</span>
          </div>
        </div>
      </el-card>
  
      <!-- 企业福利 -->
      <el-card class="benefits-card">
        <template #header>
          <div class="card-header">
            <span>企业福利</span>
          </div>
        </template>
        
        <div class="benefits-content">
          <div v-if="benefitsList.length > 0" class="benefits-list">
            <el-tag
              v-for="benefit in benefitsList"
              :key="benefit"
              type="success"
              class="benefit-tag"
            >
              {{ benefit }}
            </el-tag>
          </div>
          <div v-else class="no-benefits">
            <el-empty description="暂无福利信息" />
          </div>
        </div>
      </el-card>
  
  
      <!-- 编辑企业信息对话框 -->
      <EnterpriseEditDialog
        v-model="editDialogVisible"
        :enterprise-data="enterpriseStore.enterpriseInfo"
        @success="handleEditSuccess"
        @navigate="handleNavigate"
      />
  
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed, onMounted } from 'vue'
  import { useEnterpriseStore } from '@/store/job/modules/enterprise'
  import { useAppStore } from '@/store/job/modules/app'
  import { enterpriseAPI } from '@/api/enterprise'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Edit, OfficeBuilding } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  import EnterpriseEditDialog from '@/components/job/EnterpriseEditDialog.vue'
  
  const enterpriseStore = useEnterpriseStore()
  const appStore = useAppStore()
  const router = useRouter()
  
  // 当前企业ID（固定为1）
  const currentCompanyId = ref(1)
  
  // 对话框状态
  const editDialogVisible = ref(false)
  
  // 编辑表单
  const editForm = reactive({
    enterpriseName: '',
    description: '',
    imageUrl: '',
    benefits: ''
  })
  
  
  // 表单验证规则
  const editFormRules = {
    enterpriseName: [
      { required: true, message: '请输入企业名称', trigger: 'blur' }
    ],
    description: [
      { required: true, message: '请输入企业简介', trigger: 'blur' }
    ]
  }
  
  // 企业福利列表
  const benefitsList = computed(() => {
    return enterpriseStore.enterpriseInfo?.benefits ? 
      enterpriseStore.enterpriseInfo.benefits.split('、') : []
  })
  
  // 福利预览
  const benefitsPreview = computed(() => {
    return editForm.benefits ? editForm.benefits.split('、').filter(b => b.trim()) : []
  })
  
  // 格式化日期
  const formatDate = (dateString) => {
    if (!dateString) return ''
    return new Date(dateString).toLocaleDateString('zh-CN')
  }
  
  
  // 编辑企业信息
  const handleEdit = () => {
    editDialogVisible.value = true
  }
  
  // 编辑成功回调
  const handleEditSuccess = async (updatedData) => {
    console.log('企业信息更新成功:', updatedData)
    // 更新store中的数据
    if (updatedData) {
      Object.assign(enterpriseStore.enterpriseInfo, updatedData)
    }
    // 重新加载企业信息
    await loadEnterpriseInfo()
    ElMessage.success('企业信息更新成功')
  }
  
  // 处理跳转事件：保存后仍留在企业信息管理（后台）
  const handleNavigate = (routeName) => {
    // 强制回到后台的企业信息管理，避免跳回前台
    router.push({ name: 'AdminEnterpriseInfo' })
  }
  
  
  
  
  // 提交编辑
  const handleSubmitEdit = async () => {
    submitting.value = true
    
    try {
      // 这里应该调用API更新企业信息
      console.log('更新企业信息:', editForm)
      ElMessage.success('企业信息更新成功')
      editDialogVisible.value = false
    } catch (error) {
      ElMessage.error('保存失败')
    } finally {
      submitting.value = false
    }
  }
  
  // 提交回复
  const handleSubmitReply = async () => {
    if (!replyForm.replyContent.trim()) {
      ElMessage.warning('请输入回复内容')
      return
    }
    
    submitting.value = true
    
    try {
      // 这里应该调用API回复评价
      console.log('回复评价:', currentReview.value.reviewId, replyForm.replyContent)
      ElMessage.success('回复成功')
      replyDialogVisible.value = false
    } catch (error) {
      ElMessage.error('回复失败')
    } finally {
      submitting.value = false
    }
  }
  
  // 加载企业信息
  const loadEnterpriseInfo = async () => {
    try {
      const enterpriseId = 1 // 假设企业ID为1
      const response = await enterpriseAPI.getEnterpriseInfo(enterpriseId)
      if (response.data) {
        enterpriseStore.setEnterpriseInfo(response.data)
      }
    } catch (error) {
      console.error('加载企业信息失败:', error)
      // 如果API调用失败，使用默认数据
      enterpriseStore.setEnterpriseInfo({
        enterpriseId: 1,
        enterpriseName: '示例科技有限公司',
        description: '我们是一家专注于互联网技术创新的科技公司，致力于为客户提供优质的产品和服务。公司成立于2020年，拥有专业的研发团队和完善的管理体系。',
        imageUrl: '/vite.svg',
        benefits: '五险一金,年终奖金,带薪年假,员工培训,团建活动,弹性工作',
        rating: 4.50,
        status: 'active',
        createTime: '2024-01-15T10:30:00.000Z',
        updateTime: '2024-01-15T10:30:00.000Z'
      })
    }
  }
  
  // 组件挂载时获取数据
  onMounted(async () => {
    try {
      // 加载企业信息
      await loadEnterpriseInfo()
      console.log('EnterpriseInfo 组件已挂载，数据加载完成')
    } catch (error) {
      console.error('加载数据失败:', error)
    }
  })
  </script>
  
  <style scoped>
  .enterprise-info {
    padding: 20px;
  }
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .page-header h2 {
    margin: 0;
    color: #333;
  }
  
  .header-actions {
    display: flex;
    gap: 10px;
  }
  
  .info-card,
  .benefits-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .info-content {
    display: grid;
    gap: 20px;
  }
  
  .info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  
  .info-item label {
    font-weight: 500;
    color: #333;
    min-width: 100px;
  }
  
  .info-item span {
    color: #666;
  }
  
  .description {
    margin: 0;
    color: #666;
    line-height: 1.6;
    flex: 1;
  }
  
  
  .benefits-content {
    min-height: 100px;
  }
  
  .benefits-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .benefit-tag {
    margin: 0;
  }
  
  .no-benefits {
    text-align: center;
    padding: 40px 0;
  }
  
  
  
  .image-preview {
    margin-top: 10px;
  }
  
  .preview-image {
    width: 200px;
    height: 120px;
    border-radius: 4px;
  }
  
  .benefits-preview {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .review-to-reply {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  
  .review-to-reply .user-info {
    margin-bottom: 8px;
  }
  
  .review-to-reply .review-content {
    margin: 0;
    color: #666;
    line-height: 1.5;
  }
  
  </style>